import React, { useState } from 'react';
import { Card, Steps, Form, Input, Select, Checkbox, Button, Row, Col, message } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Step } = Steps;
const { Option } = Select;

const termOptions = [
  '2021-2022学年/第一学期',
  '2021-2022学年/第二学期',
];
const xdOptions = ['高中', '初中'];
const gradeOptions = ['高一', '高二', '高三'];
const classOptions = [
  '一班', '二班', '三班', '四班', '五班', '六班', '七班', '八班', '九班', '十班', '十一班', '十二班'
];

export default function Add() {
  const [form] = Form.useForm();
  const [checkedClasses, setCheckedClasses] = useState(classOptions);
  const navigate = useNavigate();

  const onCheckAllChange = e => {
    setCheckedClasses(e.target.checked ? classOptions : []);
    form.setFieldsValue({ classes: e.target.checked ? classOptions : [] });
  };

  const onClassesChange = list => {
    setCheckedClasses(list);
    form.setFieldsValue({ classes: list });
  };

  const onFinish = values => {
    // 可在此处提交数据到后端
    message.success('新增成功，进入下一步');
    navigate('/xk/student');
  };

  return (
    <div style={{ padding: 16, background: '#f5f6fa', minHeight: '100vh' }}>
      <Card style={{ borderRadius: 12, boxShadow: '0 2px 8px #f0f1f2' }}>
        <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 16 }}>选课设置 &gt; 创建选课</div>
        <Steps current={0} style={{ marginBottom: 32 }}>
          <Step title="基本信息" />
          <Step title="选课学生" />
          <Step title="选课设置" />
        </Steps>
        <Form
          form={form}
          layout="vertical"
          style={{ maxWidth: 700, margin: '0 auto' }}
          onFinish={onFinish}
          initialValues={{ classes: classOptions }}
        >
          <Form.Item
            label={<span>选课任务名称 <span style={{ color: 'red' }}>*</span></span>}
            name="name"
            rules={[{ required: true, message: '请输入选课任务名称' }]}
          >
            <Input placeholder="请输入选课任务名称" />
          </Form.Item>
          <Form.Item
            label={<span>学年学期 <span style={{ color: 'red' }}>*</span></span>}
            name="term"
            rules={[{ required: true, message: '请选择学年学期' }]}
          >
            <Select placeholder="请选择学年学期">
              {termOptions.map(opt => <Option key={opt} value={opt}>{opt}</Option>)}
            </Select>
          </Form.Item>
          <Form.Item
            label={<span>学段 <span style={{ color: 'red' }}>*</span></span>}
            name="xd"
            rules={[{ required: true, message: '请选择学段' }]}
          >
            <Select placeholder="请选择学段">
              {xdOptions.map(opt => <Option key={opt} value={opt}>{opt}</Option>)}
            </Select>
          </Form.Item>
          <Form.Item
            label={<span>年级 <span style={{ color: 'red' }}>*</span></span>}
            name="grade"
            rules={[{ required: true, message: '请选择年级' }]}
          >
            <Select placeholder="请选择年级">
              {gradeOptions.map(opt => <Option key={opt} value={opt}>{opt}</Option>)}
            </Select>
          </Form.Item>
          <Form.Item
            label={<span>选课班级 <span style={{ color: 'red' }}>*</span></span>}
            name="classes"
            rules={[{ required: true, message: '请选择班级' }]}
          >
            <div>
              <Checkbox
                indeterminate={checkedClasses.length > 0 && checkedClasses.length < classOptions.length}
                onChange={onCheckAllChange}
                checked={checkedClasses.length === classOptions.length}
                style={{ marginBottom: 8 }}
              >
                全选
              </Checkbox>
              <Checkbox.Group
                options={classOptions}
                value={checkedClasses}
                onChange={onClassesChange}
                style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}
              />
            </div>
          </Form.Item>
          <Form.Item label="任务描述" name="desc">
            <Input.TextArea placeholder="请输入任务描述" rows={4} />
          </Form.Item>
          <Form.Item style={{ textAlign: 'center', marginTop: 32 }}>
            <Button style={{ marginRight: 16 }}>取消</Button>
            <Button type="primary" htmlType="submit">下一步</Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}
